﻿@page "/pivot-table/editing"

@using Syncfusion.Blazor.PivotView
@using Syncfusion.Blazor.Buttons
@inherits SampleBaseComponent;

@using BlazorDemos
@using ej2_blazor_productdetails

<SampleDescription>
   <p>This sample demonstrates CRUD operations performed over the raw items of any value cell in a pivot table. Different types of cell editing options are provided to make editing simpler.</p> 
</SampleDescription>
<ActionDescription>
<p>In this sample, the raw items of any value cell can be viewed in a drill-through dialog by double-clicking the
  cell. CRUD operations can be performed by double-clicking the cells or using toolbar options. The following CRUD operations can be performed through toolbar operations,</p>
  <ul>
        <li><code>Add</code> - To add new record, click <code>Add</code> in the toolbar.</li>
        <li><code>Edit</code> - To edit record, double click a cell.</li>
        <li><code>Delete</code> - To delete a record, click <code>Delete</code> in the toolbar after selecting a row.
        </li>
        <li><code>Update</code>,<code>Cancel</code> - You can save or discard changes by clicking <code>Update</code>
            or <code>Cancel</code> in
            the toolbar, respectively.</li>
    </ul>
    <p>The above CRUD operations can be configured in a pivot table using <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.PivotView.PivotViewCellEditSettings_members.html'>PivotViewCellEditSettings</a></code> class in code behind. There are also different modes to manipulate the data source. The available modes are:</p>
    <ul>
        <li><code>Normal</code> - Editing by row.</li>
        <li><code>Batch</code> - Editing individual cells and bulk updating.</li>
        <li><code>Dialog</code> - Editing by row with a dialog option. </li>
        <li><code>Command Columns</code> - An additional column appends to the data grid with icons to perform CRUD operations. Editing using cell double-click is restricted here.</li>
    </ul>
    <p>More information on the editing feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/editing/'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotProductDetails" Height="300" Width="100%" EnableValueSorting=true ShowTooltip=false>
            <PivotViewDataSourceSettings DataSource="@Data" ExpandAll=false EnableSorting=true>
                <PivotViewColumns>
                    <PivotViewColumn Name="Year"></PivotViewColumn>
                    <PivotViewColumn Name="Quarter"></PivotViewColumn>
                    <PivotViewColumn Name="Order_Source" Caption="Order Source"></PivotViewColumn>
                </PivotViewColumns>
                <PivotViewRows>
                    <PivotViewRow Name="Country"></PivotViewRow>
                    <PivotViewRow Name="Product_Categories" Caption="Product Categories"></PivotViewRow>
                    <PivotViewRow Name="Products"></PivotViewRow>
                </PivotViewRows>
                <PivotViewValues>
                    <PivotViewValue Name="In_Stock" Caption="In Stock"></PivotViewValue>
                    <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                    <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
                </PivotViewValues>
                <PivotViewFormatSettings>
                    <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                </PivotViewFormatSettings>
            </PivotViewDataSourceSettings>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
            <PivotViewCellEditSettings AllowEditing=true AllowAdding=true AllowDeleting=true Mode="@SelectedMode" AllowEditOnDblClick="@DblClick" AllowCommandColumns="@CommandColumnsClick"></PivotViewCellEditSettings>
        </SfPivotView>
    </div>
</div>

<div class="col-lg-3 property-section">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    <div class="property-panel-section">
        <div class="property-panel-header" style="padding-bottom:5px; font-size:16px">Properties</div>
        <div class="property-panel-content">
            <table id="property" style="width: 100%;height:100%;" class="property-panel-table">
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <SfRadioButton Label="Inline Editing" Name="EditOperation" Value="inline" @bind-Checked="ModeSelected" ValueChange="OnRadioChange" TChecked="string"></SfRadioButton>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <SfRadioButton Label="Batch Editing" Name="EditOperation" Value="batch" @bind-Checked="ModeSelected" ValueChange="OnRadioChange" TChecked="string"></SfRadioButton>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <SfRadioButton Label="Dialog Editing" Name="EditOperation" Value="dialog" @bind-Checked="ModeSelected" ValueChange="OnRadioChange" TChecked="string"></SfRadioButton>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <SfRadioButton Label="Command Columns" Name="EditOperation" Value="cc" @bind-Checked="ModeSelected" ValueChange="OnRadioChange" TChecked="string"></SfRadioButton>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .e-pivotview {
        min-height: 200px;
    }

    html, body {
        height: 100%;
    }
</style>

@code{

    public EditMode SelectedMode = EditMode.Normal;
    public bool DblClick = true;
    public bool CommandColumnsClick = false;
    public string ModeSelected = "inline";

    public string[] DrilledMembers = new string[] { "France" };

    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }

    public void OnRadioChange(ChangeArgs<string> args)
    {
        if (args.Value == "inline")
        {
            this.DblClick = true;
            this.CommandColumnsClick = false;
            this.SelectedMode = EditMode.Normal;
        }
        else if (args.Value == "batch")
        {
            this.DblClick = true;
            this.CommandColumnsClick = false;
            this.SelectedMode = EditMode.Batch;
        }
        else if (args.Value == "dialog")
        {
            this.DblClick = true;
            this.CommandColumnsClick = false;
            this.SelectedMode = EditMode.Dialog;
        }
        else
        {
            this.CommandColumnsClick = true;
        }
    }
}